forum

home / developersection / forums / how to create stylish tooltip using css

how to create stylish tooltip using css

Manoj Bhatt 3542 25-Jan-2013

Hi Everyone!
I want to create stylish tool tip for my web project.
Thanks

css-css3

Updated on 28-Jan-2013

Manoj Bhatt

Other

Message

Can you answer this question?

1 Answers

28-Jan-2013

Hi Manoj!
You can try below line of code for creating stylish tooltip using CSS

<style type="text/css">
        a
        {
            color: #900;
            text-decoration: none;
        }
        
        a:hover
        {
            color: red;
            position: relative;
        }
        
        a[title]:hover:after
        {
            content: attr(title);
            padding: 4px 8px;
            color: #333;
            position: absolute;
            left: 0;
            top: 100%;
            white-space: nowrap;
            z-index: 20px;
            -moz-border-radius: 5px;
            -webkit-border-radius: 5px;
            border-radius: 5px;
            -moz-box-shadow: 0px 0px 4px #222;
            -webkit-box-shadow: 0px 0px 4px #222;
            box-shadow: 0px 0px 4px #222;
            background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
            background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc));
            background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
            background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
            background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
            background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
        }
    </style>

apply this css as below

<p>ToolTip is used to display some text when the mouse is <a href="#" title="move over"> move over </a> a control. This control is helpful in providing quick information when the user moves the mouse over an associated control.
</p>

advertising